﻿<!DOCTYPE html>
<html lang="zh-CN">
<head th:replace="~{common::header('未通过的采购计划')}">
<body>
<div id="app" class="container mt-5">
    <h2 class="text-primary text-center">未通过的采购计划</h2>
    <!--搜索栏开始-->
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleMaterialCode"style="font-size: 16px;">物资编号</label>
            <input type="text" v-model="searchParam.materialCode" class="form-control" id="exampleMaterialCode" placeholder="请输入物资编号">
        </div>
        <div class="form-group">
            <label for="exampleMaterialName" style="font-size: 16px;">物资名称</label>
            <input type="email"v-model="searchParam.materialName" class="form-control" id="exampleMaterialName" placeholder="请输入物资名称">
        </div>
        <div class="form-group">
            <label for="exampleInputNumber" style="font-size: 16px;">每页显示个数:</label>
            <select class="form-select" id="exampleInputNumber" v-model.number="searchParam.pageSize"style="font-size: 16px;">
                <option value="10" selected>10</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="0">全部</option>
            </select>
        </div>
        <div class="form-group" style="font-size: 16px;">
            <label for="exampleInputStatus"style="font-size: 16px;">状态</label>
            <select class="form-select" id="exampleInputStatus" v-model="searchParam.status"style="font-size: 16px;">
                <option value="" selected>全部</option>
                <option value="驳回">驳回</option>
                <option value="废弃">废弃</option>
            </select>
        </div>
        <button type="button" @click="findPage" class="btn btn-primary btn-sm"style="font-size: 16px;">查询</button>
    </form>
    <br>
    <!--    搜索栏结束-->
    <div class="text-left mt-3" style="font-size: 16px;">
        <button class="btn btn-secondary" @click="selectAll">全选/取消</button>
        <button class="btn btn-secondary" @click="openDetails">详情</button>
    </div>
<br>
    <table class="table table-striped mt-3"style="font-size: 16px;">
        <thead>
        <tr>
            <th>选择</th>
            <th>序号</th>
            <th>物资代码</th>
            <th>物资名称</th>
            <th>需求计划号</th>
            <th>数量</th>
            <th>审批状态</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(enquireDetail, index) in searchResult.data" :key="enquireDetail.materialCode" >
            <td><input type="checkbox" v-model="ids" :value="enquireDetail.materialCode" @change="show"></td>
            <td style="font-size: 16px;">{{ (searchParam.pageNum - 1) * searchParam.pageSize + index + 1 }}</td>
            <td style="font-size: 16px;">{{ enquireDetail.materialCode }}</td>
            <td style="font-size: 16px;">{{ enquireDetail.materialName }}</td>
            <td style="font-size: 16px;">{{ enquireDetail.orderId }}</td>
            <td style="font-size: 16px;">{{ enquireDetail.amount }}</td>
            <td style="font-size: 16px;">{{ enquireDetail.status }}</td>
        </tr>
        </tbody>
    </table>
    <paginate
            :container-class="'pagination'"
            :page-count="pageCount"
            :click-handler="findPage"
            :prev-text="'上一页'"
            :next-text="'下一页'"
            :first-last-button="true"
            :first-button-text="'首页'"
            :last-button-text="'尾页'"
            v-model="searchParam.pageNum"
    >
    </paginate>
    <p class="mt-3">
        共 {{ searchResult.total }} 个需求计划，每页 {{ searchParam.pageSize }} 个
    </p>
</div>


<script>
    Vue.component('paginate',VuejsPaginate)
    new Vue({
        el: '#app',
        data: {
           baseURL:'/enquireDetail/',
            selected: [],
            searchResult:{
                //后端响应的结果
            },
            pageCount:0,//总页数
            searchParam:{
                pageNum:1,
                pageSize:10,
                materialCode:'',
                materialName:'',
                number:2,
                status:''
            },
            entity:{},
            ids:[],
            allMaterialCodes:[],
        },
        created(){
    this.findPage()
        },
        methods: {
            findPage(){
                //异步请求
                axios.get('/enquireDetail/page',{
                    params:this.searchParam
                }).then(result=>{

                    // 保存到属性中
                    this.searchResult=result.data
                    console.log(this.searchResult)

                    //计算总页数
                    this.pageCount=Math.ceil(this.searchResult.total/this.searchParam.pageSize)
                    //存储所有物资代码
                    this.allMaterialCodes = this.searchResult.data.map(item => item.materialCode)
                })
            },
            show(){
                console.log(this.ids)
            },
            selectAll() {
                if (this.ids.length === this.allMaterialCodes.length) {
                    this.ids = []; //取消全选
                } else {
                    this.ids = this.allMaterialCodes.slice(); //全选
                }
            },
            openDetails() {
                const selectedMaterialCode = this.ids.join(',');
                console.log('选中的项:', selectedMaterialCode)
                if (selectedMaterialCode) {
                    window.document.location = `QuotationHistory.html?MaterialCodes=${selectedMaterialCode}`;
                } else {
                    alert('请选择至少一项');
                }
            }
        }
    });
</script>
</body>
</html>